<template>
  <div class="detail-container">
    <div class="breadcrumb-container flex-row">
      <breadcrumb />
    </div>
    <el-divider />
    <div class="stat-content">
      <div class="filter-container flex-row">
        <el-input
          v-model="tableListQuery.keyword"
          placeholder="请输入搜索内容"
          prefix-icon="el-icon-search"
          style="width:200px;"
          class="filter-item"
          clearable
        />
        <el-button class="filter-item" type="primary" @click="getStatList">搜索</el-button>
        <el-select
          v-model="tableListQuery.itemId"
          placeholder="请选择费用项目"
          clearable
          class="filter-item"
          style="width:150px;margin-left:15px;"
          @change="getStatList"
        >
          <el-option
            v-for="option in itemList"
            :key="option.id"
            :label="option.name"
            :value="option.id"
          />
        </el-select>
        <el-select
          v-model="tableListQuery.financeType"
          placeholder="请选择费用类型"
          clearable
          class="filter-item"
          style="width:150px;margin-left:15px;"
          @change="getStatList"
        >
          <el-option label="支出" :value="0" />
          <el-option label="收入" :value="1" />
        </el-select>
        <el-date-picker
          v-model="tableListQuery.billDateBegin"
          type="month"
          placeholder="请选择账单日期"
          class="filter-item"
          style="width:150px;margin-left:15px;"
          @change="getStatList"
        />
        <div class="filter-item" style="margin-left:15px;">-</div>
        <el-date-picker
          v-model="tableListQuery.billDateEnd"
          type="month"
          placeholder="请选择账单日期"
          class="filter-item"
          style="width:150px;margin-left:15px;"
          @change="getStatList"
        />
      </div>
      <statistic-table :stat-list="statList" @handleDetail="billDetail" /><br>
      <el-pagination
        :v-show="total > 0"
        background
        :current-page="tableListQuery.page"
        :page-sizes="[10, 20, 50,100]"
        :page-size="tableListQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

  </div>
</template>

<script>
import { getFinanceCatalogList } from '@/api/dataConfig'
import { pageByOperation } from '@/api/house'
import { billDetailStat } from '@/api/billing'
import Breadcrumb from '@/components/Breadcrumb'
import StatisticTable from './components/StatisticTable.vue'
export default {
  components: {
    Breadcrumb,
    StatisticTable
  },
  data() {
    return {
      daterange: [],
      value: '',
      houseList: [],
      houseListQuery: {
        page: 1,
        limit: 10000
      },
      listQuery: {
        keyword: undefined,
        month: undefined,
        property: undefined,
        status: undefined
      },
      statList: [],
      itemList: [],
      tableListQuery: {
        page: 1,
        limit: 10,
        keyword: undefined,
        financeType: undefined,
        itemId: undefined,
        billDateBegin: undefined,
        billDateEnd: undefined
      },
      loading: false,
      total: 0,
      showAdd: false,
      showDel: false,
      isEdit: false,
      reportId: undefined,
      defaultForm: {
        type: 0,
        houseId: '',
        billDate: '',
        beginDate: '',
        checkDate: '',
        endDate: '',
        userName: '',
        remark: '',
        rentFee: undefined,
        filePath: '',
        suggestion: undefined
      },
      reportForm: {
        type: 0,
        houseId: '',
        billDate: '',
        beginDate: '',
        checkDate: '',
        endDate: '',
        userName: '',
        remark: '',
        rentFee: undefined,
        filePath: '',
        suggestion: undefined
      }
    }
  },
  created() {
    this.getStatList()
    this.getItemList()
  },
  methods: {
    addReportClick() {
      this.getHouseList()
      this.showAdd = true
    },
    close() {
      this.isEdit = false
      this.showAdd = false
      this.reportForm = { ...this.defaultForm }
      this.daterange = []
    },
    getHouseList() {
      pageByOperation(this.houseListQuery).then(response => {
        this.houseList = response.data.records
      })
    },
    billDetail(id) {
      const routeUrl = this.$router.resolve({ path: '/view', query: { billId: id, type: '2' }})
      window.open(routeUrl.href, '_blank')
    },
    getStatList() {
      this.loading = true
      billDetailStat(this.tableListQuery).then(response => {
        this.statList = response.data.records
        this.total = response.data.total
        this.loading = false
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.tableListQuery.page = 1
      this.tableListQuery.limit = val
      this.getStatList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.tableListQuery.page = val
      this.getStatList()
    },
    selectHouse(val) {
      console.log(val)
    },
    selectDaterange(list) {
      this.reportForm.beginDate = list[0]
      this.reportForm.endDate = list[1]
    },
    handleDel(id) {
      this.showDel = true
      this.tempBillId = id
    },
    async getItemList() {
      let itemList1 = []
      let itemList2 = []
      const params1 = {
        type: 0,
        financeType: 0
      }
      const params2 = {
        type: 0,
        financeType: 1
      }
      const res1 = await getFinanceCatalogList(params1)
      if (res1.code === 200) {
        itemList1 = res1.data
      }
      const res2 = await getFinanceCatalogList(params2)
      if (res2.code === 200) {
        itemList2 = res2.data
      }
      this.itemList = [...itemList1, ...itemList2]
    }
  }
}
</script>

<style lang="scss" scoped>
.breadcrumb-container {
  position: relative;
  width: 100%;
  height: 60px;
  padding: 0 14px;

  &::after {
    content: '';
    position: absolute;
    left: 0px;
    top: 50%;
    width: 2px;
    height: 37px;
    background-color: #5AC6B7;
    transform: translateY(-50%);
  }
}

.stat-content {
  padding: 10px;
}

.myDigo h2 {
  height: 32px;
  background: #343436;
}

.form-btn {
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
}

::v-deep .myDigo .el-dialog__footer {
  background: #e5e9ed;
  padding-top: 20px;
}

::v-deep .el-dialog.myDigo .el-dialog__body {
  padding: 0;
}

::v-deep .el-dialog.myDigo .el-dialog__header {
  display: none;
}

.el-dialog.myDigo h2 {
  height: 58px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 39px;
  padding-right: 39px;
  color: #fff;
  font-size: 18px;
  padding-top: 0;
  margin-top: 0;
  overflow: hidden;
  font-weight: normal;
  font-family: "SourceHanSansSC-regular";
}

.el-dialog.myDigo h2 i {
  font-size: 26px;
  cursor: pointer;
}

::v-deep .el-dialog.myDigo .el-dialog__body {
  text-align: left;
}

.digoDiv ::v-deep .el-input--medium .el-input__inner {
    height: 32px;
    line-height: 32px;
    text-indent: 5px;
}

::v-deep .inputTop input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
select::-webkit-input-placeholder {
  font-size: 12px;
}

::v-deep .inputTop input:-moz-placeholder,
textarea:-moz-placeholder,
select::-webkit-input-placeholder {
  font-size: 12px;
}

::v-deep .inputTop input::-moz-placeholder,
textarea::-moz-placeholder,
select::-webkit-input-placeholder {
  font-size: 12px;
}

::v-deep .inputTop input:-ms-input-placeholder,
textarea:-ms-input-placeholder,
select::-webkit-input-placeholder {
  font-size: 12px;
}

::v-deep .el-form-item {
  margin-bottom: 16px;
}

::v-deep .el-form-item--medium .el-form-item__label {
  color: #101010;
  font-size: 12px;
  font-weight: bold;
}

.nonbg-btn {
  background: none;
}

.mtright {
  margin-right: 11px;
}

.formDiv {
  padding-left: 39px;
  padding-right: 39px;
  overflow: hidden;
}

.borbtoonline {
  padding-bottom: 20px;
  margin-bottom: 20px;
  position: relative;
}

.borbtoonline::after {
  content: "";
  position: absolute;
  left: -51px;
  bottom: 0;
  width: 111%;
  height: 1px;
  background: #f0f0f0;
}

.borbtoonline .el-form-item {
  margin-bottom: 0;
}

.el-icon-remove-outline {
  margin-left: 20px;
  display: inline-block;
  color: #5AC6B7;
  font-weight: bold;
  transform: scale(1.5);
}

.white-bg-btn {
  background: #fff;
}

.dialog-footer-btn {
  width: 100px;
}

.form-note-text {
  font-size: 12px;
  font-weight: bold;
  color: #101010;
}

.dialog-content {
  height: 150px;
  padding: 0 60px;
  align-items: center;
}

.warning-icon {
  margin-right: 20px;
  height: 24px;
  width: 24px;
  fill: #F45656;
}

.dialog-tip-text {
  display: inline-block;
  font-size: 18px;
  height: 24px;
  line-height: 24px;
  color: rgba(28, 28, 28, 100);
}
</style>
